<template>
  <view class="seek-list">
    <navigator
      :url="`/pages/search/particulars/index?id=${data.id}`"
      open-type="navigate"
      hover-class="navigator-hover"
    >
      <view class="profile-card"
      @click="()=>{
        postTopGuestsAPI(data)
      }"
      >
        <image
          class="profile-img"
          :src="['.jpg', '.jpeg', '.png', '.gif', '.webp'].some(item => props.data.avatar.endsWith(item)) ? props.data.avatar : '/static/tabs/user_default.png'"
        >
        </image>
        <!-- :src="props.data.avatar" -->
        <view class="profile-info">
          <view class="name-gender">
            <text class="name">{{ props.data.nickname }}</text>
            <image
              class="gender-icon"
              :src="data.gender === '男' ? '/static/images/boy.png' : '/static/images/girl.png'"
            ></image>
          </view>
          <view class="details">
            <text class="details-desc">{{ props.data.household_region }}</text>
            <text class="details-desc">{{ props.data.age }}岁</text>
            <text class="details-desc">{{ props.data.marital_status }}</text>
            <text class="details-desc">{{ props.data.height }}cm</text>
            <text class="details-desc">{{ props.data.occupation }}</text>
            <text class="details-desc">{{ props.data.education }}</text>
            <!-- <text class="details-desc">5年</text> -->
          </view>
          <view class="tags">
            <view class="tag">{{ props.data.hobbies }}</view>
          </view>
        </view>
      </view>
      <view class="desc">{{ props.data.self_introduction }}</view>
      <view class="requirements">
        <view class="requirement-tag">寻觅</view>
        <view class="requirement-text">
          <text
            >{{ props.data.age_range }},{{ props.data.height_range }},{{
              props.data.desired_marital_status
            }},{{ props.data.minimum_education }},{{ props.data.minimum_income }}</text
          >
        </view>
      </view>
    </navigator>
  </view>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import { postTopGuestsAPI } from "@/services/index/home";
const props = defineProps({
  data: {
    type: Array as any,
    default: () => [],
  },
})
// console.log(props.data)
</script>
<style scoped lang="scss">
.seek-list {
  border-radius: 10rpx;
  margin: 10rpx;
  padding: 10rpx;
  background-color: #ffffff;
  box-shadow: 2rpx 5rpx 10rpx -2rpx #dbdbdb;
  text-align: center;
}

.profile-card {
  display: flex;
  border-radius: 8rpx;

  .profile-img {
    width: 250rpx;
    height: 250rpx;
    border-radius: 10%;
    margin-right: 8rpx;
  }

  .profile-info {
    flex: 1;

    .name-gender {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;

      .name {
        font-size: 35rpx;
        font-weight: 900;
        margin-right: 8rpx;
      }

      .gender-icon {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .details {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 16rpx;
      .details-desc {
        color: #666666;
        font-size: 32rpx;
      }
      text {
        margin-right: 8rpx;
        color: #666;
      }
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 8rpx;
      font-size: 27rpx;
      .tag {
        background-color: #e0f7fa;
        color: #00796b;
        padding: 8rpx 16rpx;
        border-radius: 8rpx;
        margin-right: 8rpx;
        margin-bottom: 8rpx;
      }
    }
  }
}

.desc {
  font-size: 30rpx;
  color: #999999;
  margin-bottom: 8rpx;
}

.requirements {
  display: flex;
  align-items: center;

  .requirement-tag {
    font-size: 27rpx;
    background-color: #00bfa5;
    color: #ffffff;
    padding: 4rpx 8rpx;
    border-radius: 4rpx;
    margin-right: 8rpx;
    white-space: nowrap;
  }

  .requirement-text {
    font-size: 27rpx;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666666;
  }
}
</style>
